import { defineComponent, reactive, ref } from 'vue'
import { ElCard, ElSpace, ElLink } from 'element-plus'
import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'
import type { ValuesType, StateType } from './typings'

import ProSaasTable from '~/components/ProSaasTable'
import AliIcon from '~/components/AliIocn'
import CompileView from './compile'
// import dayjs from 'dayjs'
import useVuexGetters from '~/hooks/useVuexGetters'

export default defineComponent(function plan() {
  const state = reactive<StateType>({
    visible: false,
    type: 'read'
  })
  const proSaasTableRef = ref<ProSaasTableExposeType>()
  const formValues = reactive<ValuesType>({})
  const userState = useVuexGetters('user', ['permission'])
  const columns: TableColumnProps<ValuesType>[] = [
    {
      label: '巡视类型',
      prop: 'typeName',
      minWidth: 160
    },
    {
      label: '巡视主体',
      prop: 'moduleName',
      minWidth: 160
    },
    {
      label: '巡视生成周期',
      prop: 'cycle',
      minWidth: 160,
      render: (_, value) => {
        return <>{value}个月</>
      }
    },
    {
      label: '巡视生成时间',
      prop: 'firstMakeDate',
      minWidth: 160
      // render: (_, value) => {
      //   return <>{dayjs(value).format('YYYY-MM-DD')}</>
      // }
    },
    {
      label: '操作',
      prop: 'options',
      minWidth: 160,
      align: 'center',
      fixed: 'right',
      unFixed: true,
      render: ({ row }) => (
        <ElSpace>
          {userState.permission.value.has('produce_patrol_update') && (
            <ElLink type="primary" onClick={() => compile('update', row)}>
              <AliIcon type="icon-bianji" />
              &nbsp; 编辑
            </ElLink>
          )}
        </ElSpace>
      )
    }
  ]
  //  编辑显示
  const compile = (type: StateType['type'], row?: ValuesType) => {
    state.record = row
    state.type = type
    state.visible = !state.visible

    if (!state.visible) proSaasTableRef?.value?.toSearch()
  }

  return () => (
    <ElCard>
      <ProSaasTable<ValuesType>
        ref={proSaasTableRef}
        columns={columns}
        searchParams={formValues}
        needPagination={false}
        dispatchType="tour/GetPatrolConfigList"
        searchFormProps={{
          model: formValues
        }}
      />
      {state.visible && (
        <CompileView
          visible={state.visible}
          type={state.type}
          record={state.record}
          onCancel={() => compile('read')}
        ></CompileView>
      )}
    </ElCard>
  )
})
